<template>
    <view class='wordCloud_box'>
        <word :width='charts_width' :word_data='word_data'></word>
        <view class='title'>事件高频词</view>
        <!-- 事件高频词 -->
        <view class='ranking_content'>
            <view class='ranking_nav'>
                <view>排序</view>
                <view>站点</view>
                <view>次数</view>
            </view>
            <view class='ranking_list'>
                <view v-for='(list,i) in high_word' :key='i'>
                    <view>{{i+1}}</view>
                    <view>{{list.key}}</view>
                    <view>{{list.hot}}</view>
                </view>
            </view>
        </view>
        <!-- 关键词演变 -->
        <view class='title'>关键词演变</view>
        <view class='tab'>
            <view 
                :class='{on:tab_index == i}' 
                v-for='(tab,i) in content.keywordstrends' :key='i'
                @tap='switchoverTab(i)'
            >{{convert(Object.keys(tab)[0])}}</view>
        </view>
        <swiper class="swiper" :current='tab_index' @change='change'>
            <swiper-item v-for='(evolve,evolve_index) in content.keywordstrends' :key='evolve_index'>
                <view class='evolve_box'>
                    <view v-for='(item,index) in evolve[Object.keys(evolve)[0]]' :key='index'>
                        <view class='left'>{{item.time.slice(5,10)}}</view>
                        <view class='right'>
                            <view v-for='(word,word_index) in item.keywords' :key='word_index'>{{word.key}}</view>
                        </view>
                    </view>
                </view>
            </swiper-item>
        </swiper>
        
    </view>
</template>

<script>

    import word from './charts/word.vue'

    export default {
        components: {
            word
        },
        props: {
           content: Object 
        },
        data() {
            return {
                convert: this.$convert,
                charts_width: 0,
                tab_index: 0,
                word_data: [],
                high_word: [],
                tab: [],
            }
        },
        async mounted() {
            // keywordstrends 关键词演变
            // word 词云
            // let words = this.content.word.reverse();
            let words = this.content.word;
            this.high_word = words.slice(0,10);
            words.forEach((val,i) => {
                let textSize = 10;
                if(i<5) {
                    textSize = 40-4*i
                }else if(i<15) {
                    textSize = 24-(i-5)
                }
                let obj = {
                    name: val.key,
                    textSize
                }
                this.word_data.push(obj)
            });
           this.charts_width = await this.$getDomInfo(".charts_box","width");
        },
        methods: {
            switchoverTab(index) {
                this.tab_index = index;
            },
            change(e) {
                this.switchoverTab(e.detail.current)
            }
        }
    }
</script>

<style lang="scss" scoped>
.wordCloud_box {
    width: 100%;
    font-size: 24upx;
    .title {
        width: 100%;
        color: #333;
        font-weight: 600;
        padding: 25upx 0;
    }
    .ranking_content {
        width: 100%;
        .ranking_nav {
            width: 100%;
            height: 58upx;
            display: flex;
            align-items: center;
            padding: 0 20upx;
            box-sizing: border-box;
            background: #F7F7F7;
            >view {
                flex: 1;
                height: 100%;
                display: flex;
                align-items: center;
                &:nth-last-child(1) {
                    flex: .5;
                    justify-content: center;
                }
            }
        }
        .ranking_list {
            width: 100%;
            >view {
                width: 100%;
                height: 58upx;
                display: flex;
                align-items: center;
                padding: 0 20upx;
                box-sizing: border-box;
                &:nth-child(even) {
                    background: #F7F7F7;
                }
                &:nth-child(1),&:nth-child(2),&:nth-child(3) {
                    >view:nth-child(1) {
                        color: #D40E00;
                    }
                }
                >view {
                    flex: 1;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    &:nth-last-child(1) {
                        flex: .5;
                        justify-content: center;
                    }
                }
            }
        }
    }
    .tab {
        width: 100%;
        height: 60upx;
        display: flex;
        align-items: center;
        margin-bottom: 10upx;
        >view {
            width: 150upx;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24upx;
            color: #666;
            position: relative;
        }
        .on {
            color: #2191ff;
            &::before {
                content: "";
                width: 50upx;
                height: 4upx;
                background: #2191ff;
                border-radius: 10upx;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 0;
            }
        }
    }
    .swiper {
        width: 100%;
        height: 1710upx;
        .evolve_box {
            width: 100%;
            background: #F7F7F7;
            padding: 30upx;
            box-sizing: border-box;
            color: #333;
            >view {
                width: 100%;
                height: 150upx;
                display: flex;
                &:nth-last-child(1) {
                    .left {
                        &::after {
                            content: "";
                            width: 16upx;
                            height: 2upx;
                            background: #ccc;
                            position: absolute;
                            right: 0;
                            bottom: 0,
                        }
                    }
                }
                >view {
                    height: 100%;
                    display: flex;
                    align-items: center;
                }
                .left {
                    width: 80upx;
                    justify-content: center;
                    position: relative;
                    &::before {
                        content: "";
                        width: 16upx;
                        height: 2upx;
                        background: #ccc;
                        position: absolute;
                        right: 0;
                        top: 0,
                    }
                }
                .right {
                    flex: 1;
                    display: flex;
                    flex-wrap: wrap;
                    border-left: 1px solid #ccc;
                    box-sizing: border-box;
                    padding-left: 20upx;
                    box-sizing: border-box;
                    >view {
                        width: 25%;
                        height: 50upx;
                        display: flex;
                        align-items: center;
                    }
                }
            }
        }
    }

}
</style>